import { TMotion, TPlanMotion } from "@/types";
import { uniqid } from "@/utils";
import MaskModal from "@/components/MaskModal";
import useCheck from "@/hooks/useCheck";
import MotionList from "../../motion/MotionList";

const defaultProps = {
  unit: 0,
  sets: [[0, 10]],
  recordWay: 0,
  setsType: 0,
  innerRest: 0,
  outerRest: 0,
  openInner: false,
  openOuter: false,
};
type props = {
  onSelect: (motions: TPlanMotion[]) => void;
  isMulti?: boolean;
  trigger?: React.ReactNode;
};
const MotionSelector = ({ onSelect, isMulti = true, trigger }: props) => {
  const { checked, handleCheck, handleClearCheck } = useCheck<TMotion>({
    key: "_id",
    isMultiple: isMulti,
  });
  const handleClose = () => {
    handleClearCheck();
  };
  const handleConfirm = () => {
    onSelect([
      ...checked.map((item) => ({
        uuid: uniqid(),
        motionId: item._id ?? "",
        category: item.category,
        group: item.group,
        name: item.name,
        tool: item.tool,
        img: item.img,
        ...defaultProps,
      })),
    ]);
    handleClearCheck();
  };
  return (
    <MaskModal
      height="96vh"
      onCancel={handleClose}
      onConfirm={handleConfirm}
      trigger={trigger}
    >
      <MotionList mode="check" checked={checked} onClickMotion={handleCheck} />
    </MaskModal>
  );
};
export default MotionSelector;
